<template>
  <div class="draglist-container">
    <Introduce title="拖拽列表">
      <template #introduce>
        拖拽列表组件
      </template>
    </Introduce>

    <DragList group="list" :list="list1"/>
    <DragList group="list" :list="list2"/>
  </div>
</template>

<script>
import DragList from '@/components/DragList'
import { reactive } from 'vue'
export default {
  components:{
    DragList
  },
  setup(){
    const list1 = reactive(["left-1","left-2","left-3","left-4"])
    const list2 = reactive(["right-1","right-2","right-3","right-4"])

    return {list1,list2}
  }
}
</script>

<style lang="scss" scoped>
.draglist-container{
  .draglist{
    margin-left: 30px;
  }
}
</style>